import React, { useState, useEffect } from "react";
import {
  Home, Users, CalendarCheck, MessageSquareText, PenTool, Star, Plus, Check, X,
  ChevronLeft, Sparkles, LayoutDashboard, ClipboardList, FolderKanban, Mic,
  GraduationCap, ScrollText, ClipboardCheck, Inbox, Bell, UserRound, FileBarChart,
  QrCode, LogOut, Upload, Lock, Flame, BookOpen, Sprout, ShieldCheck,
} from "lucide-react";

/* ================= design tokens ================= */
const C = {
  bg: "#FBF7EC", card: "#FFFFFF", ink: "#2B2A1E", inkSoft: "#6B6650",
  olive: "#4E5B27", oliveDark: "#30391A", oliveSoft: "#EAEFDD",
  gold: "#C9972E", goldSoft: "#F4E4B8",
  indigo: "#33447A", indigoSoft: "#E4E7F2",
  pink: "#E8A9BE", pinkSoft: "#FBEAF1",
  aqua: "#3FA79A", aquaSoft: "#E1F2EE",
  red: "#B5442E", redSoft: "#FBEAE5",
  line: "#E7E0CC",
};

const FONTS = `
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400..700&family=Tajawal:wght@300;400;500;700;900&display=swap');
.font-display{font-family:'Reem Kufi',sans-serif}
.font-body{font-family:'Tajawal',sans-serif}
@keyframes marquee-rtl{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.marquee-track{animation:marquee-rtl 34s linear infinite;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.star-badge{transition:transform .15s ease}
.star-badge:hover{transform:scale(1.15) rotate(8deg)}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid ${C.gold};outline-offset:2px}
`;

function OctaStar({ size = 16, fill = C.gold }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill={fill}>
      <path d="M50 0 L61 33 L100 33 L68 54 L79 88 L50 67 L21 88 L32 54 L0 33 L39 33 Z" />
    </svg>
  );
}

/* ================= constants ================= */
const CLASSES = ["أول متوسط/3", "أول متوسط/4", "أول متوسط/5", "أول متوسط/6"];
const MARQUEE_TEXT = "كن كمن يمشي على الرمل، يرى أثر خطواته، لكن لا تُسمع له صوتاً";

const NAMES = [
  "لمى العتيبي", "جوري الحربي", "غلا القحطاني", "دانة السبيعي", "ريتاج الشمري", "نوف الدوسري",
  "شهد المطيري", "روان الزهراني", "سدن العنزي", "مهى الغامدي", "أثير الحارثي", "وعد البقمي",
  "ريناد العصيمي", "جنى المالكي", "تالا الرشيدي", "لجين آل سعد", "بشاير الجهني", "رغد الشهري",
  "أروى القرني", "هيا العمري", "سلمى الفيفي", "نجد الخالدي", "ليان السلمي", "رهف الحازمي",
];

function makeInitialDB() {
  const students = NAMES.map((name, i) => ({
    id: i + 1,
    name,
    cls: CLASSES[i % CLASSES.length],
    pin: "1111",
    parentName: "ولي أمر " + name.split(" ")[0],
    points: 4 + ((i * 3) % 15),
    attendance: {},
    behaviorLog: [],
    skills: { reading: 1 + (i % 4), handwriting: 1 + ((i + 1) % 4) },
  }));

  const tasks = [
    { id: 1, type: "واجب", title: "إعراب الجملة الاسمية", cls: "أول متوسط/3", due: "2026-08-27" },
    { id: 2, type: "واجب", title: "استخراج الأفعال من نص القراءة", cls: "أول متوسط/4", due: "2026-08-28" },
    { id: 3, type: "مشروع", title: "معجم مصور لعشر كلمات جديدة", cls: "أول متوسط/5", due: "2026-09-05" },
  ];

  return {
    students, tasks,
    submissions: [],
    diagnosticAttempts: {},
    charterSigned: {},
    learningStyleResults: {},
    notifications: [
      { id: 1, audience: "all", text: "مرحبًا بكن في منصة لغتي التفاعلية لهذا الفصل الدراسي 🌿", date: "2026-08-20", read: false },
    ],
  };
}

const CHARTER_LINES = [
  "أحافظ على وقت الحصة وأشارك بأدب واحترام.",
  "أؤدي واجباتي بنفسي وبأمانة دون نسخ من غيري.",
  "أقرأ يوميًا ولو صفحة واحدة بصوت واضح.",
  "أعتني بخطي وأكتب بعناية وترتيب.",
  "أحترم زميلاتي ومعلمتي وأقبل الملاحظة بصدر رحب.",
  "أسعى لتطوير لغتي لأنها هويتي.",
];

const DIAGNOSTIC_QUESTIONS = [
  { q: "ما نوع الجملة: «الطالبةُ مجتهدةٌ»؟", options: ["اسمية", "فعلية", "شرطية", "ندائية"], correct: 0 },
  { q: "أعرب كلمة «مجتهدةٌ» في المثال السابق:", options: ["فاعل", "مفعول به", "خبر", "مبتدأ"], correct: 2 },
  { q: "جمع كلمة «كتاب»:", options: ["كتب", "كتّاب", "كاتبون", "كتابات"], correct: 0 },
  { q: "مرادف كلمة «سعيد»:", options: ["حزين", "فرح", "غاضب", "خائف"], correct: 1 },
  { q: "ضد كلمة «كريم»:", options: ["بخيل", "شجاع", "طويل", "قوي"], correct: 0 },
  { q: "الفعل «كتبَ» فعل:", options: ["مضارع", "أمر", "ماضٍ", "منصوب"], correct: 2 },
  { q: "«يا طالبةُ» أسلوب:", options: ["استفهام", "نداء", "تعجب", "نهي"], correct: 1 },
  { q: "علامة رفع المثنى:", options: ["الضمة", "الألف", "الواو", "الكسرة"], correct: 1 },
  { q: "«هذا كتابٌ مفيدٌ» - كلمة «مفيدٌ»:", options: ["نعت", "بدل", "حال", "توكيد"], correct: 0 },
  { q: "جمع «معلمة» جمع مؤنث سالم:", options: ["معلمات", "معلمون", "معلمين", "معالم"], correct: 0 },
  { q: "حرف من حروف الجر:", options: ["إنّ", "على", "قد", "لن"], correct: 1 },
  { q: "الاسم الموصول للمفرد المؤنث:", options: ["الذي", "التي", "اللذان", "اللاتي"], correct: 1 },
  { q: "«لن» حرف:", options: ["جزم", "نصب", "جر", "عطف"], correct: 1 },
  { q: "مثنى كلمة «قلم»:", options: ["أقلام", "قلمان", "قلمين فقط", "أقلامان"], correct: 1 },
  { q: "الفاعل في «طارت العصافيرُ»:", options: ["طارت", "العصافير", "لا يوجد فاعل", "حرف جر"], correct: 1 },
  { q: "همزة الوصل تكتب في:", options: ["أكل", "استخرج", "أحمد", "إنسان"], correct: 1 },
  { q: "«ما أجملَ الحديقةَ» أسلوب:", options: ["تعجب", "استفهام", "شرط", "نفي"], correct: 0 },
  { q: "المفعول به في «قرأتُ الدرسَ»:", options: ["قرأتُ", "الدرسَ", "التاء", "لا يوجد"], correct: 1 },
  { q: "علامة نصب جمع المؤنث السالم:", options: ["الفتحة", "الكسرة", "الياء", "الواو"], correct: 1 },
  { q: "«كان الجوُّ صحوًا» - كلمة «صحوًا»:", options: ["اسم كان", "خبر كان", "فاعل", "مفعول مطلق"], correct: 1 },
];

const LEARNING_STYLE_QUESTIONS = [
  { q: "عندما أتعلم كلمة جديدة أفضّل أن:", options: [{ t: "أراها مكتوبة بخط واضح وألوان", s: "بصري" }, { t: "أسمعها منطوقة عدة مرات", s: "سمعي" }, { t: "أكتبها بيدي وأحركها", s: "حركي" }] },
  { q: "أتذكر الدرس بشكل أفضل عندما:", options: [{ t: "أشاهد صورًا أو خرائط ذهنية", s: "بصري" }, { t: "أستمع لشرح المعلمة", s: "سمعي" }, { t: "أطبّق وأتحرك أثناء الشرح", s: "حركي" }] },
  { q: "في وقت الفراغ أفضّل:", options: [{ t: "القراءة أو مشاهدة الصور", s: "بصري" }, { t: "الاستماع للقصص الصوتية", s: "سمعي" }, { t: "الأنشطة اليدوية والحركة", s: "حركي" }] },
  { q: "أفهم القاعدة النحوية أسرع عبر:", options: [{ t: "جدول أو رسم توضيحي", s: "بصري" }, { t: "شرح شفهي مكرر", s: "سمعي" }, { t: "تمارين تطبيقية مباشرة", s: "حركي" }] },
  { q: "عند حفظ نص أدبي أستخدم:", options: [{ t: "كتابته وتلوين الأفكار الرئيسة", s: "بصري" }, { t: "ترديده بصوت عالٍ", s: "سمعي" }, { t: "تمثيل معانيه بالحركة", s: "حركي" }] },
  { q: "أفضل طريقة لمراجعتي قبل الاختبار:", options: [{ t: "بطاقات وملخصات مرسومة", s: "بصري" }, { t: "تسجيل صوتي أستمع له", s: "سمعي" }, { t: "حل أسئلة وتمارين متكررة", s: "حركي" }] },
  { q: "في الحصة أنتبه أكثر عندما:", options: [{ t: "تُعرض شرائح أو صور", s: "بصري" }, { t: "تحكي المعلمة قصة", s: "سمعي" }, { t: "نقوم بنشاط جماعي", s: "حركي" }] },
  { q: "أصف نفسي بأنني:", options: [{ t: "ألاحظ التفاصيل البصرية بسرعة", s: "بصري" }, { t: "أحب الأحاديث والنقاشات", s: "سمعي" }, { t: "لا أستطيع الجلوس طويلًا دون حركة", s: "حركي" }] },
  { q: "عند القراءة الجهرية أفضّل أن:", options: [{ t: "أتابع النص بعيني بتركيز", s: "بصري" }, { t: "أستمع لقراءة نموذجية أولًا", s: "سمعي" }, { t: "أقرأ بصوت مرتفع وأنا أتحرك", s: "حركي" }] },
];

const TEACHER_TABS = [
  { id: "dashboard", label: "لوحة المعلمة", icon: LayoutDashboard },
  { id: "students", label: "الطالبات والفصول", icon: Users },
  { id: "attendance", label: "الحضور والغياب", icon: CalendarCheck },
  { id: "behavior", label: "السلوك والمشاركة", icon: MessageSquareText },
  { id: "profile", label: "ملف الإنجاز", icon: UserRound },
  { id: "assignments", label: "الواجبات", icon: ClipboardList },
  { id: "projects", label: "المشاريع", icon: FolderKanban },
  { id: "reading", label: "القراءة والتسجيل", icon: Mic },
  { id: "handwriting", label: "الخط", icon: PenTool },
  { id: "diagnostic", label: "الاختبار التشخيصي", icon: GraduationCap },
  { id: "charter", label: "ميثاق لغتي", icon: ScrollText },
  { id: "learningStyle", label: "أنماط التعلم", icon: Sparkles },
  { id: "submissions", label: "الأعمال المرسلة", icon: Inbox },
  { id: "grades", label: "الدرجات والتقييم", icon: ClipboardCheck },
  { id: "notifications", label: "الإشعارات", icon: Bell },
  { id: "reports", label: "التقارير والإحصائيات", icon: FileBarChart },
  { id: "qr", label: "رمز QR", icon: QrCode },
];

const STUDENT_TABS = [
  { id: "home", label: "الرئيسية", icon: Home },
  { id: "assignments", label: "الواجبات", icon: ClipboardList },
  { id: "projects", label: "المشاريع", icon: FolderKanban },
  { id: "reading", label: "القراءة والتسجيل", icon: Mic },
  { id: "handwriting", label: "الخط", icon: PenTool },
  { id: "diagnostic", label: "الاختبار التشخيصي", icon: GraduationCap },
  { id: "charter", label: "ميثاق لغتي", icon: ScrollText },
  { id: "learningStyle", label: "أنماط التعلم", icon: Sparkles },
  { id: "myWork", label: "أعمالي ودرجاتي", icon: Inbox },
  { id: "profile", label: "ملفي الشخصي", icon: UserRound },
  { id: "notifications", label: "الإشعارات", icon: Bell },
];

const PARENT_TABS = [
  { id: "overview", label: "نظرة عامة", icon: LayoutDashboard },
  { id: "work", label: "أعمال ابنتي", icon: Inbox },
  { id: "notifications", label: "الإشعارات", icon: Bell },
];

/* ================= tiny shared bits ================= */
function SectionHeader({ eyebrow, title, sub, accent = C.gold }) {
  return (
    <div className="mb-6">
      <div className="font-body text-xs font-bold tracking-wide mb-1" style={{ color: accent }}>{eyebrow}</div>
      <h2 className="font-display text-2xl md:text-3xl" style={{ color: C.ink }}>{title}</h2>
      {sub && <p className="font-body text-sm mt-1" style={{ color: C.inkSoft }}>{sub}</p>}
    </div>
  );
}

function ClassPicker({ value, onChange, classes = CLASSES }) {
  return (
    <div className="flex flex-wrap gap-2 mb-6">
      {classes.map((c) => (
        <button key={c} onClick={() => onChange(c)}
          className="font-body text-sm px-4 py-2 rounded-full border transition-colors"
          style={{ borderColor: value === c ? C.olive : C.line, background: value === c ? C.olive : C.card, color: value === c ? "#fff" : C.inkSoft }}>
          {c}
        </button>
      ))}
    </div>
  );
}

function Card({ children, style, className = "" }) {
  return <div className={`rounded-2xl border p-4 ${className}`} style={{ background: C.card, borderColor: C.line, ...style }}>{children}</div>;
}

function Badge({ children, tone = "olive" }) {
  const map = {
    olive: [C.oliveSoft, C.olive], gold: [C.goldSoft, "#8A6412"], red: [C.redSoft, C.red],
    indigo: [C.indigoSoft, C.indigo], pink: [C.pinkSoft, "#A45072"], aqua: [C.aquaSoft, C.aqua],
  };
  const [bg, fg] = map[tone];
  return <span className="font-body text-xs px-2.5 py-1 rounded-full" style={{ background: bg, color: fg }}>{children}</span>;
}

function EmptyState({ text }) {
  return <p className="font-body text-sm text-center py-10" style={{ color: C.inkSoft }}>{text}</p>;
}

function fileToDataURL(file) {
  return new Promise((resolve, reject) => {
    const r = new FileReader();
    r.onload = () => resolve(r.result);
    r.onerror = reject;
    r.readAsDataURL(file);
  });
}

function todayISO() {
  return new Date().toISOString().slice(0, 10);
}

/* ================= LANDING & LOGIN ================= */
function LandingScreen({ onPickRole }) {
  const roles = [
    { id: "teacher", label: "المعلمة", desc: "إدارة الفصول والمتابعة والتقييم", icon: LayoutDashboard, tone: C.indigo, soft: C.indigoSoft },
    { id: "student", label: "الطالبة", desc: "واجباتي وأعمالي ودرجاتي", icon: GraduationCap, tone: C.aqua, soft: C.aquaSoft },
    { id: "parent", label: "ولي الأمر", desc: "متابعة أداء ابنتي", icon: UserRound, tone: C.pink, soft: C.pinkSoft },
  ];
  return (
    <div dir="rtl" className="font-body min-h-screen flex flex-col items-center justify-center p-6" style={{ background: C.oliveDark }}>
      <style>{FONTS}</style>
      <div className="flex flex-col items-center mb-10 text-center">
        <div className="rounded-full flex items-center justify-center mb-4" style={{ width: 84, height: 84, background: C.goldSoft, border: `3px solid ${C.gold}` }}>
          <div className="flex items-end gap-1">
            <Sprout size={22} color={C.olive} />
            <Flame size={26} color={C.gold} />
            <BookOpen size={22} color={C.indigo} />
          </div>
        </div>
        <h1 className="font-display text-3xl md:text-4xl" style={{ color: C.goldSoft }}>منصة لغتي التفاعلية</h1>
        <p className="font-body text-sm mt-2" style={{ color: "#C9CBB4" }}>منصّة تعليميّة تفاعليّة للّغة العربيّة · إشراف الأستاذة عواطف الحربي</p>
      </div>

      <div className="overflow-hidden w-full max-w-xl rounded-2xl mb-10 py-3" style={{ background: "rgba(255,255,255,0.06)" }}>
        <div className="marquee-track font-body text-sm" style={{ color: C.goldSoft }}>
          {MARQUEE_TEXT}{"      •      "}{MARQUEE_TEXT}{"      •      "}{MARQUEE_TEXT}
        </div>
      </div>

      <div className="grid gap-4 w-full max-w-3xl md:grid-cols-3">
        {roles.map(({ id, label, desc, icon: Icon, tone, soft }) => (
          <button key={id} onClick={() => onPickRole(id)}
            className="text-right rounded-2xl p-5 border transition-transform hover:-translate-y-0.5"
            style={{ background: "rgba(255,255,255,0.04)", borderColor: "rgba(255,255,255,0.14)" }}>
            <div className="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style={{ background: soft }}>
              <Icon size={20} color={tone} />
            </div>
            <div className="font-display text-lg mb-1" style={{ color: "#fff" }}>الدخول بصفة {label}</div>
            <p className="font-body text-xs" style={{ color: "#B9BC9F" }}>{desc}</p>
          </button>
        ))}
      </div>
    </div>
  );
}

function LoginScreen({ role, db, onBack, onSuccess }) {
  const [error, setError] = useState("");
  const roleMeta = {
    teacher: { title: "دخول المعلمة", tone: C.indigo, soft: C.indigoSoft },
    student: { title: "دخول الطالبة", tone: C.aqua, soft: C.aquaSoft },
    parent: { title: "دخول ولي الأمر", tone: C.pink, soft: C.pinkSoft },
  }[role];

  const [teacherUser, setTeacherUser] = useState("");
  const [teacherPass, setTeacherPass] = useState("");

  const [cls, setCls] = useState(CLASSES[0]);
  const studentsInClass = db.students.filter((s) => s.cls === cls);
  const [studentId, setStudentId] = useState(studentsInClass[0]?.id || "");
  const [pin, setPin] = useState("");

  const [search, setSearch] = useState("");
  const matches = db.students.filter((s) => s.name.includes(search.trim()));
  const [parentPin, setParentPin] = useState("");
  const [parentTarget, setParentTarget] = useState(null);

  function submitTeacher() {
    if (teacherUser.trim() === "المعلمة" && teacherPass === "1234") onSuccess({ role: "teacher" });
    else setError("اسم المستخدم أو كلمة المرور غير صحيحة");
  }
  function submitStudent() {
    const st = db.students.find((s) => s.id === Number(studentId));
    if (st && pin === st.pin) onSuccess({ role: "student", studentId: st.id });
    else setError("رمز الدخول غير صحيح");
  }
  function submitParent() {
    if (parentTarget && parentPin === "0000") onSuccess({ role: "parent", studentId: parentTarget.id });
    else setError("تأكدي من اختيار الطالبة وإدخال الرمز الصحيح");
  }

  return (
    <div dir="rtl" className="font-body min-h-screen flex items-center justify-center p-6" style={{ background: C.bg }}>
      <style>{FONTS}</style>
      <div className="w-full max-w-md">
        <button onClick={onBack} className="font-body text-sm flex items-center gap-1 mb-5" style={{ color: C.inkSoft }}>
          <ChevronLeft size={14} /> رجوع
        </button>
        <Card>
          <div className="flex items-center gap-3 mb-5">
            <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: roleMeta.soft }}>
              <Lock size={18} color={roleMeta.tone} />
            </div>
            <h2 className="font-display text-xl" style={{ color: C.ink }}>{roleMeta.title}</h2>
          </div>

          {role === "teacher" && (
            <div className="space-y-3">
              <input placeholder="اسم المستخدم (المعلمة)" value={teacherUser} onChange={(e) => setTeacherUser(e.target.value)}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }} />
              <input placeholder="كلمة المرور" type="password" value={teacherPass} onChange={(e) => setTeacherPass(e.target.value)}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }} />
              <p className="font-body text-xs" style={{ color: C.inkSoft }}>تجريبي: المستخدم «المعلمة» وكلمة المرور «1234»</p>
              {error && <p className="font-body text-xs" style={{ color: C.red }}>{error}</p>}
              <button onClick={submitTeacher} className="font-body w-full text-sm py-3 rounded-xl" style={{ background: C.indigo, color: "#fff" }}>دخول</button>
            </div>
          )}

          {role === "student" && (
            <div className="space-y-3">
              <select value={cls} onChange={(e) => { setCls(e.target.value); setStudentId(""); }}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }}>
                {CLASSES.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
              <select value={studentId} onChange={(e) => setStudentId(e.target.value)}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }}>
                {studentsInClass.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
              </select>
              <input placeholder="رمز الدخول (PIN)" value={pin} onChange={(e) => setPin(e.target.value)}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }} />
              <p className="font-body text-xs" style={{ color: C.inkSoft }}>تجريبي: الرمز «1111» لجميع الطالبات</p>
              {error && <p className="font-body text-xs" style={{ color: C.red }}>{error}</p>}
              <button onClick={submitStudent} className="font-body w-full text-sm py-3 rounded-xl" style={{ background: C.aqua, color: "#fff" }}>دخول</button>
            </div>
          )}

          {role === "parent" && (
            <div className="space-y-3">
              <input placeholder="اكتبي اسم ابنتك للبحث" value={search} onChange={(e) => { setSearch(e.target.value); setParentTarget(null); }}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }} />
              {search && (
                <div className="max-h-36 overflow-y-auto space-y-1">
                  {matches.slice(0, 6).map((s) => (
                    <button key={s.id} onClick={() => setParentTarget(s)}
                      className="w-full text-right font-body text-sm p-2 rounded-lg border"
                      style={{ borderColor: parentTarget?.id === s.id ? C.pink : C.line, background: parentTarget?.id === s.id ? C.pinkSoft : "transparent" }}>
                      {s.name} <span style={{ color: C.inkSoft }}>· {s.cls}</span>
                    </button>
                  ))}
                  {matches.length === 0 && <p className="font-body text-xs" style={{ color: C.inkSoft }}>لا توجد نتائج</p>}
                </div>
              )}
              <input placeholder="رمز ولي الأمر (PIN)" value={parentPin} onChange={(e) => setParentPin(e.target.value)}
                className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }} />
              <p className="font-body text-xs" style={{ color: C.inkSoft }}>تجريبي: الرمز «0000»</p>
              {error && <p className="font-body text-xs" style={{ color: C.red }}>{error}</p>}
              <button onClick={submitParent} className="font-body w-full text-sm py-3 rounded-xl" style={{ background: C.pink, color: "#fff" }}>دخول</button>
            </div>
          )}
        </Card>
      </div>
    </div>
  );
}

/* ================= shared submission form ================= */
function SubmitWork({ type, tasksForType, studentId, db, persist, kind }) {
  const [taskId, setTaskId] = useState(tasksForType[0]?.id || "");
  const [text, setText] = useState("");
  const [fileInfo, setFileInfo] = useState(null);
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const student = db.students.find((s) => s.id === studentId);

  async function handleFile(e) {
    const f = e.target.files?.[0];
    if (!f) return;
    try {
      const dataUrl = await fileToDataURL(f);
      setFileInfo({ dataUrl, name: f.name, mime: f.type });
    } catch {
      setFileInfo(null);
    }
  }

  function submit() {
    if (kind === "file" && !fileInfo) return;
    if (kind === "text" && !text.trim()) return;
    setBusy(true);
    const task = tasksForType.find((t) => t.id === Number(taskId));
    const submission = {
      id: Date.now(),
      studentId, type,
      title: task ? task.title : type,
      cls: student.cls,
      date: todayISO(),
      status: "جديد", grade: null, note: "",
      attachment: kind === "file" ? { kind: type === "قراءة" ? "audio" : "image", ...fileInfo } : { kind: "text", text },
    };
    const newDb = { ...db, submissions: [submission, ...db.submissions] };
    persist(newDb);
    setBusy(false); setDone(true); setText(""); setFileInfo(null);
    setTimeout(() => setDone(false), 2500);
  }

  return (
    <Card className="space-y-3">
      {tasksForType.length > 0 && (
        <select value={taskId} onChange={(e) => setTaskId(e.target.value)}
          className="font-body w-full text-sm p-3 rounded-xl border outline-none" style={{ borderColor: C.line }}>
          {tasksForType.map((t) => <option key={t.id} value={t.id}>{t.title} — تسليم {t.due}</option>)}
        </select>
      )}
      {tasksForType.length === 0 && (
        <p className="font-body text-sm" style={{ color: C.inkSoft }}>لا توجد مهام {type === "واجب" ? "واجبات" : "مشاريع"} لفصلكِ حاليًا، يمكنكِ رغم ذلك إرسال عمل حر.</p>
      )}
      {kind === "text" && (
        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={4} placeholder="اكتبي إجابتك هنا..."
          className="font-body w-full text-sm p-3 rounded-xl border outline-none resize-none" style={{ borderColor: C.line }} />
      )}
      {kind === "file" && (
        <label className="flex items-center gap-2 justify-center border-2 border-dashed rounded-xl p-6 cursor-pointer"
          style={{ borderColor: C.line }}>
          <Upload size={18} color={C.inkSoft} />
          <span className="font-body text-sm" style={{ color: C.inkSoft }}>
            {fileInfo ? fileInfo.name : type === "قراءة" ? "اختاري ملف تسجيل صوتي" : "اختاري صورة كراسة الخط"}
          </span>
          <input type="file" accept={type === "قراءة" ? "audio/*" : "image/*"} className="hidden" onChange={handleFile} />
        </label>
      )}
      <button onClick={submit} disabled={busy}
        className="font-body text-sm px-5 py-2.5 rounded-xl" style={{ background: C.oliveDark, color: "#fff" }}>
        إرسال العمل
      </button>
      {done && <p className="font-body text-xs" style={{ color: C.olive }}>✓ تم إرسال عملك وسيصل إلى المعلمة فورًا</p>}
    </Card>
  );
}

function MyWorkList({ studentId, db }) {
  const mine = db.submissions.filter((s) => s.studentId === studentId);
  if (mine.length === 0) return <EmptyState text="لم ترسلي أي أعمال بعد" />;
  return (
    <div className="space-y-2">
      {mine.map((s) => (
        <Card key={s.id} className="flex items-center justify-between">
          <div>
            <div className="font-body text-sm font-medium" style={{ color: C.ink }}>{s.title}</div>
            <div className="font-body text-xs mt-0.5" style={{ color: C.inkSoft }}>{s.type} · {s.date}</div>
            {s.status === "مقيمة" && s.note && <p className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>ملاحظة: {s.note}</p>}
          </div>
          <div className="text-left">
            {s.status === "مقيمة" ? (
              <Badge tone="olive">الدرجة {s.grade}/10</Badge>
            ) : (
              <Badge tone="gold">بانتظار التقييم</Badge>
            )}
          </div>
        </Card>
      ))}
    </div>
  );
}

/* ================= TEACHER PAGES ================= */
function TeacherDashboard({ db }) {
  const total = db.students.length;
  const pending = db.submissions.filter((s) => s.status === "جديد").length;
  const weekStars = db.students.reduce((sum, s) => sum + s.points, 0);
  const signedCharter = Object.keys(db.charterSigned).length;

  const classAverages = CLASSES.map((c) => {
    const inClass = db.students.filter((s) => s.cls === c);
    const avg = inClass.reduce((s2, st) => s2 + st.points, 0) / (inClass.length || 1);
    return { cls: c, avg };
  }).sort((a, b) => b.avg - a.avg);
  const maxAvg = Math.max(...classAverages.map((c) => c.avg), 1);

  const stats = [
    { label: "إجمالي الطالبات", value: total, icon: Users },
    { label: "أعمال بانتظار التقييم", value: pending, icon: Inbox },
    { label: "نجمات لغتي الإجمالية", value: weekStars, icon: Star },
    { label: "موقّعات ميثاق لغتي", value: `${signedCharter}/${total}`, icon: ScrollText, small: true },
  ];

  const recent = [...db.submissions].slice(0, 5);

  return (
    <div>
      <SectionHeader eyebrow="لوحة التحكم" title="أهلًا بك، الأستاذة عواطف" sub="ملخص شامل لحالة الفصول اليوم" accent={C.indigo} />
      <div className="overflow-hidden rounded-2xl mb-6 py-3 border" style={{ background: C.oliveDark, borderColor: C.oliveDark }}>
        <div className="marquee-track font-body text-sm" style={{ color: C.goldSoft }}>
          {MARQUEE_TEXT}{"      •      "}{MARQUEE_TEXT}{"      •      "}{MARQUEE_TEXT}
        </div>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
        {stats.map(({ label, value, icon: Icon, small }) => (
          <Card key={label}>
            <div className="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style={{ background: C.indigoSoft }}>
              <Icon size={18} color={C.indigo} />
            </div>
            <div className={`font-display ${small ? "text-lg" : "text-2xl"}`} style={{ color: C.ink }}>{value}</div>
            <div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>{label}</div>
          </Card>
        ))}
      </div>
      <div className="grid md:grid-cols-2 gap-4">
        <Card>
          <div className="flex items-center gap-2 mb-4"><OctaStar size={16} /><h3 className="font-display text-lg" style={{ color: C.ink }}>ترتيب الفصول بمعدل النجمات</h3></div>
          <div className="space-y-3">
            {classAverages.map(({ cls, avg }, i) => (
              <div key={cls} className="flex items-center gap-3">
                <span className="font-body text-xs w-5 h-5 rounded-full flex items-center justify-center shrink-0" style={{ background: i === 0 ? C.gold : C.oliveSoft, color: i === 0 ? "#fff" : C.olive }}>{i + 1}</span>
                <span className="font-body text-sm w-24 shrink-0" style={{ color: C.ink }}>{cls}</span>
                <div className="flex-1 h-2.5 rounded-full overflow-hidden" style={{ background: C.oliveSoft }}>
                  <div className="h-full rounded-full" style={{ width: `${(avg / maxAvg) * 100}%`, background: i === 0 ? C.gold : C.olive }} />
                </div>
                <span className="font-body text-xs w-10 text-left" style={{ color: C.inkSoft }}>{avg.toFixed(1)}</span>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <h3 className="font-display text-lg mb-4" style={{ color: C.ink }}>أحدث الأعمال المرسلة</h3>
          {recent.length === 0 && <EmptyState text="لا توجد أعمال مرسلة بعد" />}
          <div className="space-y-2">
            {recent.map((s) => {
              const st = db.students.find((x) => x.id === s.studentId);
              return (
                <div key={s.id} className="flex items-center justify-between text-sm font-body">
                  <span style={{ color: C.ink }}>{st?.name} — {s.title}</span>
                  <Badge tone={s.status === "جديد" ? "gold" : "olive"}>{s.status}</Badge>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </div>
  );
}

function StudentsTab({ db, persist }) {
  const [filterClass, setFilterClass] = useState(CLASSES[0]);
  const [newName, setNewName] = useState("");
  const filtered = db.students.filter((s) => s.cls === filterClass);

  function adjustPoints(id, delta) {
    persist({ ...db, students: db.students.map((s) => s.id === id ? { ...s, points: Math.max(0, s.points + delta) } : s) });
  }
  function addStudent() {
    if (!newName.trim()) return;
    const id = Date.now();
    persist({ ...db, students: [...db.students, { id, name: newName.trim(), cls: filterClass, pin: "1111", parentName: "ولي أمر " + newName.trim().split(" ")[0], points: 0, attendance: {}, behaviorLog: [], skills: { reading: 0, handwriting: 0 } }] });
    setNewName("");
  }

  return (
    <div>
      <SectionHeader eyebrow="السجل الشامل" title="إدارة الطالبات والفصول" sub="الفصول الأربعة: أول متوسط ٣ / ٤ / ٥ / ٦" accent={C.indigo} />
      <ClassPicker value={filterClass} onChange={setFilterClass} />
      <div className="flex gap-2 mb-5 rounded-2xl p-2 border" style={{ background: C.card, borderColor: C.line }}>
        <input value={newName} onChange={(e) => setNewName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addStudent()}
          placeholder={`إضافة طالبة إلى ${filterClass}...`} className="font-body flex-1 bg-transparent outline-none px-3 text-sm" style={{ color: C.ink }} />
        <button onClick={addStudent} className="font-body text-sm px-4 py-2 rounded-xl flex items-center gap-1 shrink-0" style={{ background: C.olive, color: "#fff" }}>
          <Plus size={14} /> إضافة
        </button>
      </div>
      <div className="space-y-2">
        {filtered.map((s) => (
          <Card key={s.id} className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-full flex items-center justify-center font-display text-sm shrink-0" style={{ background: C.oliveSoft, color: C.olive }}>{s.name.charAt(0)}</div>
              <div>
                <div className="font-body text-sm font-medium" style={{ color: C.ink }}>{s.name}</div>
                <div className="font-body text-xs" style={{ color: C.inkSoft }}>{s.points} نجمة · {s.parentName}</div>
              </div>
            </div>
            <div className="flex items-center gap-1">
              <button onClick={() => adjustPoints(s.id, -1)} className="w-7 h-7 rounded-full border flex items-center justify-center" style={{ borderColor: C.line, color: C.inkSoft }}>−</button>
              <div className="star-badge w-8 h-8 rounded-full flex items-center justify-center" style={{ background: C.goldSoft }}><OctaStar size={14} /></div>
              <button onClick={() => adjustPoints(s.id, 1)} className="w-7 h-7 rounded-full border flex items-center justify-center" style={{ borderColor: C.line, color: C.olive }}>+</button>
            </div>
          </Card>
        ))}
        {filtered.length === 0 && <EmptyState text="لا توجد طالبات في هذا الفصل بعد" />}
      </div>
    </div>
  );
}

function AttendanceTab({ db, persist }) {
  const [cls, setCls] = useState(CLASSES[0]);
  const [saved, setSaved] = useState(false);
  const date = todayISO();
  const list = db.students.filter((s) => s.cls === cls);

  function setStatus(id, status) {
    persist({ ...db, students: db.students.map((s) => s.id === id ? { ...s, attendance: { ...s.attendance, [date]: status } } : s) });
    setSaved(false);
  }

  return (
    <div>
      <SectionHeader eyebrow={date} title="سجل الحضور والغياب" sub="اختاري الفصل ثم سجّلي حالة كل طالبة" accent={C.indigo} />
      <ClassPicker value={cls} onChange={setCls} />
      <div className="space-y-2 mb-5">
        {list.map((s) => {
          const st = s.attendance[date];
          return (
            <Card key={s.id} className="flex items-center justify-between">
              <span className="font-body text-sm" style={{ color: C.ink }}>{s.name}</span>
              <div className="flex gap-2">
                <button onClick={() => setStatus(s.id, "present")} className="font-body text-xs px-3 py-1.5 rounded-lg border flex items-center gap-1"
                  style={{ borderColor: st === "present" ? C.olive : C.line, background: st === "present" ? C.oliveSoft : "transparent", color: st === "present" ? C.olive : C.inkSoft }}>
                  <Check size={12} /> حاضرة
                </button>
                <button onClick={() => setStatus(s.id, "absent")} className="font-body text-xs px-3 py-1.5 rounded-lg border flex items-center gap-1"
                  style={{ borderColor: st === "absent" ? C.red : C.line, background: st === "absent" ? C.redSoft : "transparent", color: st === "absent" ? C.red : C.inkSoft }}>
                  <X size={12} /> غائبة
                </button>
              </div>
            </Card>
          );
        })}
      </div>
      <button onClick={() => setSaved(true)} className="font-body text-sm px-5 py-2.5 rounded-xl" style={{ background: C.oliveDark, color: "#fff" }}>حفظ حضور اليوم</button>
      {saved && <span className="font-body text-xs mr-3" style={{ color: C.olive }}>✓ تم الحفظ</span>}
    </div>
  );
}

function BehaviorTab({ db, persist }) {
  const [cls, setCls] = useState(CLASSES[0]);
  const [openId, setOpenId] = useState(null);
  const [note, setNote] = useState("");
  const list = db.students.filter((s) => s.cls === cls);

  function addNote(id, type) {
    if (!note.trim()) return;
    persist({
      ...db, students: db.students.map((s) => s.id === id
        ? { ...s, points: Math.max(0, s.points + (type === "positive" ? 1 : -1)), behaviorLog: [{ text: note.trim(), type, date: todayISO() }, ...s.behaviorLog] }
        : s)
    });
    setNote(""); setOpenId(null);
  }

  return (
    <div>
      <SectionHeader eyebrow="متابعة يومية" title="سجل السلوك والمشاركات" sub="وثّقي الملاحظات لكل طالبة" accent={C.indigo} />
      <ClassPicker value={cls} onChange={setCls} />
      <div className="space-y-2">
        {list.map((s) => (
          <div key={s.id} className="rounded-xl border overflow-hidden" style={{ background: C.card, borderColor: C.line }}>
            <button onClick={() => setOpenId(openId === s.id ? null : s.id)} className="w-full flex items-center justify-between p-3">
              <span className="font-body text-sm" style={{ color: C.ink }}>{s.name}</span>
              <div className="flex items-center gap-2">
                <span className="font-body text-xs" style={{ color: C.inkSoft }}>{s.behaviorLog.length} ملاحظة</span>
                <ChevronLeft size={14} style={{ transform: openId === s.id ? "rotate(-90deg)" : "none", color: C.inkSoft }} />
              </div>
            </button>
            {openId === s.id && (
              <div className="p-3 pt-0 space-y-3" style={{ borderTop: `1px solid ${C.line}` }}>
                <textarea value={note} onChange={(e) => setNote(e.target.value)} placeholder="اكتبي ملاحظة..." rows={2}
                  className="font-body w-full text-sm p-2 rounded-lg border outline-none resize-none" style={{ borderColor: C.line, color: C.ink }} />
                <div className="flex gap-2">
                  <button onClick={() => addNote(s.id, "positive")} className="font-body text-xs px-3 py-1.5 rounded-lg" style={{ background: C.oliveSoft, color: C.olive }}>+ ملاحظة إيجابية</button>
                  <button onClick={() => addNote(s.id, "negative")} className="font-body text-xs px-3 py-1.5 rounded-lg" style={{ background: C.redSoft, color: C.red }}>− ملاحظة سلوكية</button>
                </div>
                {s.behaviorLog.length > 0 && (
                  <ul className="space-y-1.5 pt-1">
                    {s.behaviorLog.map((l, i) => (
                      <li key={i} className="font-body text-xs px-2.5 py-1.5 rounded-lg" style={{ background: l.type === "positive" ? C.oliveSoft : C.redSoft, color: l.type === "positive" ? C.olive : C.red }}>{l.text}</li>
                    ))}
                  </ul>
                )}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function StudentProfile({ db, persist, forStudentId, readOnly }) {
  const [cls, setCls] = useState(CLASSES[0]);
  const [sid, setSid] = useState(forStudentId || null);
  const student = db.students.find((s) => s.id === (forStudentId || sid));
  const list = db.students.filter((s) => s.cls === cls);

  function setSkill(key, val) {
    persist({ ...db, students: db.students.map((s) => s.id === student.id ? { ...s, skills: { ...s.skills, [key]: val } } : s) });
  }

  const attendanceEntries = student ? Object.values(student.attendance) : [];
  const presentRate = attendanceEntries.length ? Math.round((attendanceEntries.filter((a) => a === "present").length / attendanceEntries.length) * 100) : null;
  const mySubs = student ? db.submissions.filter((s) => s.studentId === student.id) : [];
  const graded = mySubs.filter((s) => s.status === "مقيمة");
  const avgGrade = graded.length ? (graded.reduce((a, b) => a + (b.grade || 0), 0) / graded.length).toFixed(1) : null;
  const diag = student ? db.diagnosticAttempts[student.id] : null;
  const charter = student ? db.charterSigned[student.id] : null;
  const learning = student ? db.learningStyleResults[student.id] : null;

  return (
    <div>
      <SectionHeader eyebrow="ملف الإنجاز" title={readOnly ? "ملفي الشخصي" : "ملف إنجاز الطالبة"} sub="نظرة شاملة على أداء الطالبة" accent={C.indigo} />
      {!forStudentId && (
        <>
          <ClassPicker value={cls} onChange={(c) => { setCls(c); setSid(null); }} />
          <div className="flex flex-wrap gap-2 mb-6">
            {list.map((s) => (
              <button key={s.id} onClick={() => setSid(s.id)} className="font-body text-sm px-3 py-1.5 rounded-full border"
                style={{ borderColor: sid === s.id ? C.indigo : C.line, background: sid === s.id ? C.indigoSoft : C.card, color: sid === s.id ? C.indigo : C.inkSoft }}>
                {s.name}
              </button>
            ))}
          </div>
        </>
      )}
      {!student && <EmptyState text="اختاري طالبة لعرض ملفها" />}
      {student && (
        <div className="space-y-4">
          <Card className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-full flex items-center justify-center font-display text-xl" style={{ background: C.indigoSoft, color: C.indigo }}>{student.name.charAt(0)}</div>
            <div>
              <div className="font-display text-lg" style={{ color: C.ink }}>{student.name}</div>
              <div className="font-body text-xs" style={{ color: C.inkSoft }}>{student.cls} · {student.points} نجمة</div>
            </div>
          </Card>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <Card><div className="font-display text-xl" style={{ color: C.ink }}>{presentRate === null ? "—" : `${presentRate}%`}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>نسبة الحضور</div></Card>
            <Card><div className="font-display text-xl" style={{ color: C.ink }}>{avgGrade ?? "—"}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>معدل الدرجات /10</div></Card>
            <Card><div className="font-display text-xl" style={{ color: C.ink }}>{diag ? `${diag.score}/20` : "—"}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>الاختبار التشخيصي</div></Card>
            <Card><div className="font-display text-xl" style={{ color: C.ink }}>{charter ? "موقّع ✓" : "لم يوقَّع"}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>ميثاق لغتي</div></Card>
          </div>

          <Card>
            <h3 className="font-display text-lg mb-3" style={{ color: C.ink }}>المهارات اللغوية</h3>
            <div className="space-y-3">
              {["reading", "handwriting"].map((k) => (
                <div key={k} className="flex items-center gap-2">
                  <span className="font-body text-xs w-24" style={{ color: C.inkSoft }}>{k === "reading" ? "القراءة الجهرية" : "الخط العربي"}</span>
                  <div className="flex gap-0.5">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <button key={i} disabled={readOnly} onClick={() => setSkill(k, i + 1)}>
                        <Star size={16} fill={i < student.skills[k] ? (k === "reading" ? C.gold : C.olive) : "none"} stroke={i < student.skills[k] ? (k === "reading" ? C.gold : C.olive) : C.line} />
                      </button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {learning && (
            <Card><h3 className="font-display text-lg mb-2" style={{ color: C.ink }}>نمط التعلم المفضل</h3><Badge tone="aqua">{learning.type}</Badge></Card>
          )}

          <Card>
            <h3 className="font-display text-lg mb-3" style={{ color: C.ink }}>آخر الملاحظات السلوكية</h3>
            {student.behaviorLog.length === 0 && <EmptyState text="لا توجد ملاحظات بعد" />}
            <ul className="space-y-1.5">
              {student.behaviorLog.slice(0, 5).map((l, i) => (
                <li key={i} className="font-body text-xs px-2.5 py-1.5 rounded-lg" style={{ background: l.type === "positive" ? C.oliveSoft : C.redSoft, color: l.type === "positive" ? C.olive : C.red }}>{l.text}</li>
              ))}
            </ul>
          </Card>
        </div>
      )}
    </div>
  );
}

function TasksAdminAndSubmit({ db, persist, type, role, studentId }) {
  const [cls, setCls] = useState(CLASSES[0]);
  const [title, setTitle] = useState("");
  const [due, setDue] = useState("");

  function addTask() {
    if (!title.trim()) return;
    persist({ ...db, tasks: [...db.tasks, { id: Date.now(), type, title: title.trim(), cls, due: due || todayISO() }] });
    setTitle(""); setDue("");
  }

  if (role === "teacher") {
    const list = db.tasks.filter((t) => t.type === type);
    return (
      <div>
        <SectionHeader eyebrow={type === "واجب" ? "قسم الواجبات" : "قسم المشاريع"} title={type === "واجب" ? "الواجبات" : "المشاريع"} sub="أنشئي مهمة جديدة لأحد الفصول" accent={C.indigo} />
        <Card className="grid gap-3 md:grid-cols-[1fr_auto_auto_auto] mb-6">
          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder={`عنوان ${type === "واجب" ? "الواجب" : "المشروع"}`} className="font-body text-sm p-2.5 rounded-lg border outline-none" style={{ borderColor: C.line }} />
          <select value={cls} onChange={(e) => setCls(e.target.value)} className="font-body text-sm p-2.5 rounded-lg border outline-none" style={{ borderColor: C.line }}>
            {CLASSES.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
          <input type="date" value={due} onChange={(e) => setDue(e.target.value)} className="font-body text-sm p-2.5 rounded-lg border outline-none" style={{ borderColor: C.line }} />
          <button onClick={addTask} className="font-body text-sm px-4 py-2.5 rounded-lg flex items-center gap-1 justify-center" style={{ background: C.olive, color: "#fff" }}><Plus size={14} /> إضافة</button>
        </Card>
        <div className="space-y-2">
          {list.map((t) => (
            <Card key={t.id} className="flex items-center justify-between">
              <div><div className="font-body text-sm font-medium" style={{ color: C.ink }}>{t.title}</div><div className="font-body text-xs" style={{ color: C.inkSoft }}>{t.cls} · تسليم {t.due}</div></div>
              <Badge tone="indigo">{db.submissions.filter((s) => s.title === t.title && s.type === type).length} تسليمة</Badge>
            </Card>
          ))}
          {list.length === 0 && <EmptyState text="لا توجد مهام بعد" />}
        </div>
      </div>
    );
  }

  const student = db.students.find((s) => s.id === studentId);
  const tasksForType = db.tasks.filter((t) => t.type === type && t.cls === student.cls);
  return (
    <div>
      <SectionHeader eyebrow={type === "واجب" ? "قسم الواجبات" : "قسم المشاريع"} title={type === "واجب" ? "واجباتي" : "مشاريعي"} sub="اختاري المهمة ثم أرسلي إجابتك" accent={C.aqua} />
      <SubmitWork type={type} tasksForType={tasksForType} studentId={studentId} db={db} persist={persist} kind="text" />
      <div className="mt-5"><h3 className="font-display text-base mb-2" style={{ color: C.ink }}>سجل تسليماتي</h3><MyWorkList studentId={studentId} db={db} /></div>
    </div>
  );
}

function ReadingHandwritingPage({ db, persist, type, role, studentId }) {
  if (role !== "teacher") {
    return (
      <div>
        <SectionHeader eyebrow={type === "قراءة" ? "القراءة والتسجيل الصوتي" : "الخط ورفع صورة الخط"} title={type === "قراءة" ? "أرسلي تسجيلك الصوتي" : "أرسلي صورة كراستك"} accent={C.aqua} />
        <SubmitWork type={type} tasksForType={[]} studentId={studentId} db={db} persist={persist} kind="file" />
        <div className="mt-5"><h3 className="font-display text-base mb-2" style={{ color: C.ink }}>سجل تسليماتي</h3><MyWorkList studentId={studentId} db={db} /></div>
      </div>
    );
  }
  const items = db.submissions.filter((s) => s.type === type);
  return (
    <div>
      <SectionHeader eyebrow={type === "قراءة" ? "القراءة والتسجيل الصوتي" : "الخط ورفع صورة الخط"} title={`أعمال ${type}`} sub="استمعي أو شاهدي أعمال الطالبات" accent={C.indigo} />
      {items.length === 0 && <EmptyState text="لا توجد أعمال مرسلة بعد" />}
      <div className="space-y-3">
        {items.map((s) => {
          const st = db.students.find((x) => x.id === s.studentId);
          return (
            <Card key={s.id}>
              <div className="flex items-center justify-between mb-2">
                <span className="font-body text-sm font-medium" style={{ color: C.ink }}>{st?.name} · {st?.cls}</span>
                <Badge tone={s.status === "جديد" ? "gold" : "olive"}>{s.status}</Badge>
              </div>
              {s.attachment.kind === "audio" && <audio controls src={s.attachment.dataUrl} className="w-full" />}
              {s.attachment.kind === "image" && <img src={s.attachment.dataUrl} alt="عمل الطالبة" className="max-h-64 rounded-lg border" style={{ borderColor: C.line }} />}
            </Card>
          );
        })}
      </div>
    </div>
  );
}

function DiagnosticPage({ db, persist, role, studentId }) {
  const [answers, setAnswers] = useState(Array(20).fill(null));
  const [submitted, setSubmitted] = useState(false);

  if (role === "teacher") {
    const attempts = Object.entries(db.diagnosticAttempts);
    return (
      <div>
        <SectionHeader eyebrow="نتائج الاختبار" title="الاختبار التشخيصي (٢٠ درجة)" sub="محاولة واحدة لكل طالبة" accent={C.indigo} />
        {attempts.length === 0 && <EmptyState text="لم تُجرِ أي طالبة الاختبار بعد" />}
        <div className="space-y-2">
          {attempts.map(([sid, a]) => {
            const st = db.students.find((x) => x.id === Number(sid));
            return (
              <Card key={sid} className="flex items-center justify-between">
                <span className="font-body text-sm" style={{ color: C.ink }}>{st?.name} · {st?.cls}</span>
                <Badge tone={a.score >= 15 ? "olive" : a.score >= 10 ? "gold" : "red"}>{a.score}/20</Badge>
              </Card>
            );
          })}
        </div>
      </div>
    );
  }

  const attempt = db.diagnosticAttempts[studentId];
  if (attempt) {
    return (
      <div>
        <SectionHeader eyebrow="الاختبار التشخيصي" title="نتيجتك" accent={C.aqua} />
        <Card className="text-center py-8">
          <div className="font-display text-4xl mb-2" style={{ color: C.ink }}>{attempt.score}/20</div>
          <p className="font-body text-sm" style={{ color: C.inkSoft }}>لقد أتممتِ الاختبار بتاريخ {attempt.date} — المحاولة الواحدة المسموحة مستخدمة</p>
        </Card>
      </div>
    );
  }

  function submit() {
    const score = DIAGNOSTIC_QUESTIONS.reduce((acc, q, i) => acc + (answers[i] === q.correct ? 1 : 0), 0);
    persist({ ...db, diagnosticAttempts: { ...db.diagnosticAttempts, [studentId]: { score, date: todayISO() } } });
    setSubmitted(true);
  }

  const answeredAll = answers.every((a) => a !== null);
  if (submitted) return null;

  return (
    <div>
      <SectionHeader eyebrow="اختبار مرة واحدة" title="الاختبار التشخيصي (٢٠ درجة)" sub="أجيبي عن جميع الأسئلة ثم أرسلي — لا يمكن إعادة المحاولة" accent={C.aqua} />
      <div className="space-y-3">
        {DIAGNOSTIC_QUESTIONS.map((q, i) => (
          <Card key={i}>
            <p className="font-body text-sm font-medium mb-2" style={{ color: C.ink }}>{i + 1}. {q.q}</p>
            <div className="grid grid-cols-2 gap-2">
              {q.options.map((opt, oi) => (
                <button key={oi} onClick={() => setAnswers((a) => a.map((v, idx) => idx === i ? oi : v))}
                  className="font-body text-xs p-2 rounded-lg border text-right"
                  style={{ borderColor: answers[i] === oi ? C.aqua : C.line, background: answers[i] === oi ? C.aquaSoft : "transparent", color: answers[i] === oi ? C.aqua : C.ink }}>
                  {opt}
                </button>
              ))}
            </div>
          </Card>
        ))}
      </div>
      <button onClick={submit} disabled={!answeredAll} className="font-body text-sm px-6 py-3 rounded-xl mt-5" style={{ background: answeredAll ? C.oliveDark : C.line, color: "#fff" }}>
        إرسال الإجابات النهائية
      </button>
      {!answeredAll && <p className="font-body text-xs mt-2" style={{ color: C.inkSoft }}>أجيبي عن كل الأسئلة قبل الإرسال</p>}
    </div>
  );
}

function CharterPage({ db, persist, role, studentId }) {
  if (role === "teacher") {
    return (
      <div>
        <SectionHeader eyebrow="التعهد الأخلاقي" title="ميثاق لغتي" sub="متابعة توقيع الطالبات على الميثاق" accent={C.indigo} />
        <Card className="mb-5"><ul className="space-y-1.5">{CHARTER_LINES.map((l, i) => <li key={i} className="font-body text-sm" style={{ color: C.ink }}>• {l}</li>)}</ul></Card>
        <div className="space-y-2">
          {db.students.map((s) => (
            <Card key={s.id} className="flex items-center justify-between">
              <span className="font-body text-sm" style={{ color: C.ink }}>{s.name} · {s.cls}</span>
              {db.charterSigned[s.id] ? <Badge tone="olive">موقّع {db.charterSigned[s.id]}</Badge> : <Badge tone="gold">لم يوقَّع</Badge>}
            </Card>
          ))}
        </div>
      </div>
    );
  }
  const signed = db.charterSigned[studentId];
  return (
    <div>
      <SectionHeader eyebrow="التعهد الأخلاقي" title="ميثاق لغتي" sub="اقرئي الميثاق ثم وقّعي عليه" accent={C.aqua} />
      <Card className="mb-5"><ul className="space-y-2">{CHARTER_LINES.map((l, i) => <li key={i} className="font-body text-sm flex gap-2" style={{ color: C.ink }}><Sprout size={16} color={C.olive} className="shrink-0 mt-0.5" />{l}</li>)}</ul></Card>
      {signed ? (
        <Card className="flex items-center gap-2" style={{ background: C.oliveSoft, borderColor: C.olive }}>
          <ShieldCheck size={18} color={C.olive} /><span className="font-body text-sm" style={{ color: C.olive }}>وقّعتِ الميثاق بتاريخ {signed}</span>
        </Card>
      ) : (
        <button onClick={() => persist({ ...db, charterSigned: { ...db.charterSigned, [studentId]: todayISO() } })}
          className="font-body text-sm px-6 py-3 rounded-xl" style={{ background: C.oliveDark, color: "#fff" }}>
          أوافق وأوقّع الميثاق
        </button>
      )}
    </div>
  );
}

function LearningStylePage({ db, persist, role, studentId }) {
  const [answers, setAnswers] = useState(Array(LEARNING_STYLE_QUESTIONS.length).fill(null));

  if (role === "teacher") {
    const results = Object.entries(db.learningStyleResults);
    const counts = { بصري: 0, سمعي: 0, حركي: 0 };
    results.forEach(([, r]) => counts[r.type]++);
    return (
      <div>
        <SectionHeader eyebrow="استبانة" title="أنماط التعلم" sub="توزيع الطالبات حسب النمط المفضل" accent={C.indigo} />
        <div className="grid grid-cols-3 gap-3 mb-6">
          {Object.entries(counts).map(([k, v]) => (
            <Card key={k} className="text-center"><div className="font-display text-2xl" style={{ color: C.ink }}>{v}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>{k}</div></Card>
          ))}
        </div>
        <div className="space-y-2">
          {results.map(([sid, r]) => {
            const st = db.students.find((x) => x.id === Number(sid));
            return <Card key={sid} className="flex items-center justify-between"><span className="font-body text-sm" style={{ color: C.ink }}>{st?.name}</span><Badge tone="aqua">{r.type}</Badge></Card>;
          })}
          {results.length === 0 && <EmptyState text="لا توجد نتائج بعد" />}
        </div>
      </div>
    );
  }

  const result = db.learningStyleResults[studentId];
  if (result) {
    return (
      <div>
        <SectionHeader eyebrow="نتيجتك" title="نمط التعلم المفضل لديكِ" accent={C.aqua} />
        <Card className="text-center py-8"><div className="font-display text-3xl mb-2" style={{ color: C.aqua }}>{result.type}</div><p className="font-body text-sm" style={{ color: C.inkSoft }}>حُلّلت بتاريخ {result.date}</p></Card>
      </div>
    );
  }

  function submit() {
    const tally = { بصري: 0, سمعي: 0, حركي: 0 };
    answers.forEach((a, i) => { if (a !== null) tally[LEARNING_STYLE_QUESTIONS[i].options[a].s]++; });
    const type = Object.entries(tally).sort((a, b) => b[1] - a[1])[0][0];
    persist({ ...db, learningStyleResults: { ...db.learningStyleResults, [studentId]: { type, date: todayISO() } } });
  }
  const answeredAll = answers.every((a) => a !== null);

  return (
    <div>
      <SectionHeader eyebrow="استبانة أنماط التعلم" title="اكتشفي أسلوبك المفضل في التعلم" accent={C.aqua} />
      <div className="space-y-3">
        {LEARNING_STYLE_QUESTIONS.map((q, i) => (
          <Card key={i}>
            <p className="font-body text-sm font-medium mb-2" style={{ color: C.ink }}>{i + 1}. {q.q}</p>
            <div className="space-y-1.5">
              {q.options.map((opt, oi) => (
                <button key={oi} onClick={() => setAnswers((a) => a.map((v, idx) => idx === i ? oi : v))}
                  className="font-body text-xs p-2 rounded-lg border w-full text-right"
                  style={{ borderColor: answers[i] === oi ? C.aqua : C.line, background: answers[i] === oi ? C.aquaSoft : "transparent", color: answers[i] === oi ? C.aqua : C.ink }}>
                  {opt.t}
                </button>
              ))}
            </div>
          </Card>
        ))}
      </div>
      <button onClick={submit} disabled={!answeredAll} className="font-body text-sm px-6 py-3 rounded-xl mt-5" style={{ background: answeredAll ? C.oliveDark : C.line, color: "#fff" }}>عرض نتيجتي</button>
    </div>
  );
}

function SubmissionsInbox({ db, persist }) {
  const [openId, setOpenId] = useState(null);
  const [grade, setGrade] = useState("");
  const [note, setNote] = useState("");
  const pending = db.submissions.filter((s) => s.status === "جديد");

  function saveGrade(sub) {
    const g = Math.max(0, Math.min(10, Number(grade) || 0));
    const newSubs = db.submissions.map((s) => s.id === sub.id ? { ...s, status: "مقيمة", grade: g, note } : s);
    const notif = { id: Date.now(), audience: sub.studentId, text: `تم تقييم عملك «${sub.title}» — الدرجة ${g}/10`, date: todayISO(), read: false };
    persist({ ...db, submissions: newSubs, notifications: [notif, ...db.notifications] });
    setOpenId(null); setGrade(""); setNote("");
  }

  return (
    <div>
      <SectionHeader eyebrow="صندوق الوارد" title="الأعمال المرسلة من الطالبات" sub="راجعي وقيّمي الأعمال الجديدة" accent={C.indigo} />
      {pending.length === 0 && <EmptyState text="لا توجد أعمال جديدة — أحسنتن!" />}
      <div className="space-y-3">
        {pending.map((s) => {
          const st = db.students.find((x) => x.id === s.studentId);
          return (
            <Card key={s.id}>
              <button onClick={() => setOpenId(openId === s.id ? null : s.id)} className="w-full flex items-center justify-between">
                <div className="text-right">
                  <div className="font-body text-sm font-medium" style={{ color: C.ink }}>{st?.name} — {s.title}</div>
                  <div className="font-body text-xs" style={{ color: C.inkSoft }}>{s.type} · {st?.cls} · {s.date}</div>
                </div>
                <Badge tone="gold">جديد</Badge>
              </button>
              {openId === s.id && (
                <div className="mt-3 pt-3 space-y-3" style={{ borderTop: `1px solid ${C.line}` }}>
                  {s.attachment.kind === "text" && <p className="font-body text-sm p-3 rounded-lg" style={{ background: C.oliveSoft, color: C.ink }}>{s.attachment.text}</p>}
                  {s.attachment.kind === "audio" && <audio controls src={s.attachment.dataUrl} className="w-full" />}
                  {s.attachment.kind === "image" && <img src={s.attachment.dataUrl} alt="مرفق" className="max-h-56 rounded-lg border" style={{ borderColor: C.line }} />}
                  <div className="flex gap-2">
                    <input value={grade} onChange={(e) => setGrade(e.target.value)} placeholder="الدرجة /10" type="number" min="0" max="10"
                      className="font-body text-sm p-2 rounded-lg border outline-none w-28" style={{ borderColor: C.line }} />
                    <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="ملاحظة للطالبة"
                      className="font-body text-sm p-2 rounded-lg border outline-none flex-1" style={{ borderColor: C.line }} />
                  </div>
                  <button onClick={() => saveGrade(s)} className="font-body text-sm px-4 py-2 rounded-lg" style={{ background: C.olive, color: "#fff" }}>حفظ التقييم</button>
                </div>
              )}
            </Card>
          );
        })}
      </div>
    </div>
  );
}

function GradesOverview({ db }) {
  const [cls, setCls] = useState(CLASSES[0]);
  const graded = db.submissions.filter((s) => s.status === "مقيمة" && db.students.find((st) => st.id === s.studentId)?.cls === cls);
  return (
    <div>
      <SectionHeader eyebrow="نظرة عامة" title="الدرجات والتقييم والملاحظات" accent={C.indigo} />
      <ClassPicker value={cls} onChange={setCls} />
      {graded.length === 0 && <EmptyState text="لا توجد أعمال مقيّمة في هذا الفصل بعد" />}
      <div className="space-y-2">
        {graded.map((s) => {
          const st = db.students.find((x) => x.id === s.studentId);
          return (
            <Card key={s.id}>
              <div className="flex items-center justify-between">
                <span className="font-body text-sm font-medium" style={{ color: C.ink }}>{st?.name} — {s.title}</span>
                <Badge tone="olive">{s.grade}/10</Badge>
              </div>
              {s.note && <p className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>{s.note}</p>}
            </Card>
          );
        })}
      </div>
    </div>
  );
}

function NotificationsPage({ db, persist, role, studentId }) {
  const [text, setText] = useState("");
  const [audience, setAudience] = useState("all");

  const visible = role === "teacher" ? db.notifications
    : db.notifications.filter((n) => n.audience === "all" || n.audience === studentId);

  function send() {
    if (!text.trim()) return;
    persist({ ...db, notifications: [{ id: Date.now(), audience: audience === "all" ? "all" : Number(audience), text: text.trim(), date: todayISO(), read: false }, ...db.notifications] });
    setText("");
  }

  return (
    <div>
      <SectionHeader eyebrow="مركز الإشعارات" title="الإشعارات" accent={role === "teacher" ? C.indigo : role === "parent" ? C.pink : C.aqua} />
      {role === "teacher" && (
        <Card className="mb-6 space-y-3">
          <textarea value={text} onChange={(e) => setText(e.target.value)} rows={2} placeholder="اكتبي نص الإشعار..." className="font-body w-full text-sm p-3 rounded-xl border outline-none resize-none" style={{ borderColor: C.line }} />
          <div className="flex gap-2">
            <select value={audience} onChange={(e) => setAudience(e.target.value)} className="font-body text-sm p-2 rounded-lg border outline-none flex-1" style={{ borderColor: C.line }}>
              <option value="all">جميع الطالبات</option>
              {db.students.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
            <button onClick={send} className="font-body text-sm px-4 py-2 rounded-lg" style={{ background: C.indigo, color: "#fff" }}>إرسال</button>
          </div>
        </Card>
      )}
      <div className="space-y-2">
        {visible.map((n) => (
          <Card key={n.id} className="flex items-center gap-3">
            <Bell size={16} color={C.gold} className="shrink-0" />
            <div><p className="font-body text-sm" style={{ color: C.ink }}>{n.text}</p><p className="font-body text-xs mt-0.5" style={{ color: C.inkSoft }}>{n.date}</p></div>
          </Card>
        ))}
        {visible.length === 0 && <EmptyState text="لا توجد إشعارات" />}
      </div>
    </div>
  );
}

function ReportsPage({ db }) {
  const total = db.students.length;
  const submissionsByType = ["واجب", "مشروع", "قراءة", "خط"].map((t) => ({ t, n: db.submissions.filter((s) => s.type === t).length }));
  const maxSub = Math.max(...submissionsByType.map((s) => s.n), 1);
  const graded = db.submissions.filter((s) => s.status === "مقيمة");
  const avgGrade = graded.length ? (graded.reduce((a, b) => a + b.grade, 0) / graded.length).toFixed(1) : "—";
  const diagAvg = Object.values(db.diagnosticAttempts).length
    ? (Object.values(db.diagnosticAttempts).reduce((a, b) => a + b.score, 0) / Object.values(db.diagnosticAttempts).length).toFixed(1) : "—";
  const charterPct = Math.round((Object.keys(db.charterSigned).length / total) * 100);

  return (
    <div>
      <SectionHeader eyebrow="تحليلات" title="التقارير والإحصائيات" accent={C.indigo} />
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{avgGrade}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>معدل درجات الأعمال</div></Card>
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{diagAvg}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>معدل الاختبار التشخيصي</div></Card>
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{charterPct}%</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>نسبة توقيع الميثاق</div></Card>
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{db.submissions.length}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>إجمالي الأعمال المرسلة</div></Card>
      </div>
      <Card>
        <h3 className="font-display text-lg mb-4" style={{ color: C.ink }}>الأعمال حسب النوع</h3>
        <div className="space-y-3">
          {submissionsByType.map(({ t, n }) => (
            <div key={t} className="flex items-center gap-3">
              <span className="font-body text-sm w-16" style={{ color: C.ink }}>{t}</span>
              <div className="flex-1 h-2.5 rounded-full overflow-hidden" style={{ background: C.indigoSoft }}>
                <div className="h-full rounded-full" style={{ width: `${(n / maxSub) * 100}%`, background: C.indigo }} />
              </div>
              <span className="font-body text-xs w-6 text-left" style={{ color: C.inkSoft }}>{n}</span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function QRPage({ db }) {
  const [cls, setCls] = useState(CLASSES[0]);
  const list = db.students.filter((s) => s.cls === cls);
  return (
    <div>
      <SectionHeader eyebrow="تعريف رقمي" title="رمز QR لكل طالبة" sub="رمز خاص لكل طالبة لتسهيل تسجيل الدخول أو التعريف السريع" accent={C.indigo} />
      <ClassPicker value={cls} onChange={setCls} />
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {list.map((s) => (
          <Card key={s.id} className="text-center">
            <img
              alt={`QR ${s.name}`}
              className="mx-auto mb-2 rounded-lg border"
              style={{ borderColor: C.line }}
              width={110} height={110}
              src={`https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=${encodeURIComponent("LUGHATI-STUDENT-" + s.id)}`}
            />
            <div className="font-body text-xs font-medium" style={{ color: C.ink }}>{s.name}</div>
          </Card>
        ))}
      </div>
      <p className="font-body text-xs mt-4" style={{ color: C.inkSoft }}>* تُولَّد الرموز عبر خدمة خارجية وتتطلب اتصالًا بالإنترنت لعرضها.</p>
    </div>
  );
}

/* ================= STUDENT home ================= */
function StudentHome({ db, studentId }) {
  const student = db.students.find((s) => s.id === studentId);
  const pendingTasks = db.tasks.filter((t) => t.cls === student.cls).length;
  const notifCount = db.notifications.filter((n) => n.audience === "all" || n.audience === studentId).length;
  return (
    <div>
      <SectionHeader eyebrow="أهلًا بكِ" title={student.name} sub={student.cls} accent={C.aqua} />
      <div className="overflow-hidden rounded-2xl mb-6 py-3 border" style={{ background: C.oliveDark, borderColor: C.oliveDark }}>
        <div className="marquee-track font-body text-sm" style={{ color: C.goldSoft }}>{MARQUEE_TEXT}{"      •      "}{MARQUEE_TEXT}</div>
      </div>
      <div className="grid grid-cols-3 gap-3">
        <Card className="text-center"><div className="font-display text-2xl" style={{ color: C.ink }}>{student.points}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>نجماتي</div></Card>
        <Card className="text-center"><div className="font-display text-2xl" style={{ color: C.ink }}>{pendingTasks}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>مهام فصلي</div></Card>
        <Card className="text-center"><div className="font-display text-2xl" style={{ color: C.ink }}>{notifCount}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>إشعارات</div></Card>
      </div>
    </div>
  );
}

/* ================= PARENT pages ================= */
function ParentOverview({ db, studentId }) {
  const student = db.students.find((s) => s.id === studentId);
  const attendanceEntries = Object.values(student.attendance);
  const presentRate = attendanceEntries.length ? Math.round((attendanceEntries.filter((a) => a === "present").length / attendanceEntries.length) * 100) : null;
  const graded = db.submissions.filter((s) => s.studentId === studentId && s.status === "مقيمة");
  const avgGrade = graded.length ? (graded.reduce((a, b) => a + b.grade, 0) / graded.length).toFixed(1) : "—";
  return (
    <div>
      <SectionHeader eyebrow="متابعة الأداء" title={`بيانات ${student.name}`} sub={student.cls} accent={C.pink} />
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{student.points}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>النجمات</div></Card>
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{presentRate === null ? "—" : `${presentRate}%`}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>نسبة الحضور</div></Card>
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{avgGrade}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>معدل الدرجات</div></Card>
        <Card><div className="font-display text-xl" style={{ color: C.ink }}>{db.charterSigned[studentId] ? "موقّع" : "—"}</div><div className="font-body text-xs mt-1" style={{ color: C.inkSoft }}>ميثاق لغتي</div></Card>
      </div>
      <Card>
        <h3 className="font-display text-lg mb-3" style={{ color: C.ink }}>المهارات اللغوية</h3>
        <div className="space-y-3">
          {[["reading", "القراءة الجهرية"], ["handwriting", "الخط العربي"]].map(([k, label]) => (
            <div key={k} className="flex items-center gap-2">
              <span className="font-body text-xs w-24" style={{ color: C.inkSoft }}>{label}</span>
              <div className="flex gap-0.5">{Array.from({ length: 5 }).map((_, i) => <Star key={i} size={16} fill={i < student.skills[k] ? C.pink : "none"} stroke={i < student.skills[k] ? C.pink : C.line} />)}</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

/* ================= SHELL ================= */
function Shell({ role, studentId, db, persist, tabs, onLogout, activeTab, setActiveTab, roleAccent, roleLabel }) {
  let content;
  if (role === "teacher") {
    content = {
      dashboard: <TeacherDashboard db={db} />,
      students: <StudentsTab db={db} persist={persist} />,
      attendance: <AttendanceTab db={db} persist={persist} />,
      behavior: <BehaviorTab db={db} persist={persist} />,
      profile: <StudentProfile db={db} persist={persist} />,
      assignments: <TasksAdminAndSubmit db={db} persist={persist} type="واجب" role="teacher" />,
      projects: <TasksAdminAndSubmit db={db} persist={persist} type="مشروع" role="teacher" />,
      reading: <ReadingHandwritingPage db={db} persist={persist} type="قراءة" role="teacher" />,
      handwriting: <ReadingHandwritingPage db={db} persist={persist} type="خط" role="teacher" />,
      diagnostic: <DiagnosticPage db={db} persist={persist} role="teacher" />,
      charter: <CharterPage db={db} persist={persist} role="teacher" />,
      learningStyle: <LearningStylePage db={db} persist={persist} role="teacher" />,
      submissions: <SubmissionsInbox db={db} persist={persist} />,
      grades: <GradesOverview db={db} />,
      notifications: <NotificationsPage db={db} persist={persist} role="teacher" />,
      reports: <ReportsPage db={db} />,
      qr: <QRPage db={db} />,
    }[activeTab];
  } else if (role === "student") {
    content = {
      home: <StudentHome db={db} studentId={studentId} />,
      assignments: <TasksAdminAndSubmit db={db} persist={persist} type="واجب" role="student" studentId={studentId} />,
      projects: <TasksAdminAndSubmit db={db} persist={persist} type="مشروع" role="student" studentId={studentId} />,
      reading: <ReadingHandwritingPage db={db} persist={persist} type="قراءة" role="student" studentId={studentId} />,
      handwriting: <ReadingHandwritingPage db={db} persist={persist} type="خط" role="student" studentId={studentId} />,
      diagnostic: <DiagnosticPage db={db} persist={persist} role="student" studentId={studentId} />,
      charter: <CharterPage db={db} persist={persist} role="student" studentId={studentId} />,
      learningStyle: <LearningStylePage db={db} persist={persist} role="student" studentId={studentId} />,
      myWork: (<div><SectionHeader eyebrow="أعمالي" title="أعمالي ودرجاتي" accent={C.aqua} /><MyWorkList studentId={studentId} db={db} /></div>),
      profile: <StudentProfile db={db} persist={persist} forStudentId={studentId} readOnly />,
      notifications: <NotificationsPage db={db} persist={persist} role="student" studentId={studentId} />,
    }[activeTab];
  } else {
    content = {
      overview: <ParentOverview db={db} studentId={studentId} />,
      work: (<div><SectionHeader eyebrow="أعمال ابنتي" title="الأعمال والتقييمات" accent={C.pink} /><MyWorkList studentId={studentId} db={db} /></div>),
      notifications: <NotificationsPage db={db} persist={persist} role="parent" studentId={studentId} />,
    }[activeTab];
  }

  return (
    <div dir="rtl" className="font-body min-h-screen flex" style={{ background: C.bg }}>
      <style>{FONTS}</style>
      <aside className="w-20 md:w-64 shrink-0 border-l flex flex-col py-6 px-2 md:px-4" style={{ background: C.oliveDark, borderColor: C.oliveDark }}>
        <div className="flex items-center gap-2 px-2 mb-2 justify-center md:justify-start">
          <OctaStar size={20} fill={C.gold} />
          <span className="font-display hidden md:inline text-base" style={{ color: C.goldSoft }}>منصة لغتي</span>
        </div>
        <div className="hidden md:block px-2 mb-6"><Badge tone={roleAccent}>{roleLabel}</Badge></div>
        <nav className="flex flex-col gap-1 overflow-y-auto">
          {tabs.map(({ id, label, icon: Icon }) => (
            <button key={id} onClick={() => setActiveTab(id)}
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors justify-center md:justify-start"
              style={{ background: activeTab === id ? "rgba(201,151,46,0.18)" : "transparent", color: activeTab === id ? C.gold : "#C9CBB4" }}>
              <Icon size={17} />
              <span className="font-body text-sm hidden md:inline">{label}</span>
            </button>
          ))}
        </nav>
        <button onClick={onLogout} className="mt-4 flex items-center gap-3 px-3 py-2.5 rounded-xl justify-center md:justify-start" style={{ color: "#E0A6A6" }}>
          <LogOut size={17} /><span className="font-body text-sm hidden md:inline">تسجيل الخروج</span>
        </button>
      </aside>
      <main className="flex-1 p-5 md:p-10 max-w-5xl overflow-y-auto">{content}</main>
    </div>
  );
}

/* ================= APP ================= */
export default function App() {
  const [stage, setStage] = useState("landing"); // landing | login | app
  const [pendingRole, setPendingRole] = useState(null);
  const [session, setSession] = useState(null);
  const [db, setDb] = useState(null);
  const [activeTab, setActiveTab] = useState(null);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const res = await window.storage.get("lughati-db-v1", true);
        if (alive) setDb(res ? JSON.parse(res.value) : makeInitialDB());
      } catch {
        if (alive) setDb(makeInitialDB());
      }
    })();
    return () => { alive = false; };
  }, []);

  async function persist(newDb) {
    setDb(newDb);
    try { await window.storage.set("lughati-db-v1", JSON.stringify(newDb), true); } catch {}
  }

  function handlePickRole(role) { setPendingRole(role); setStage("login"); }
  function handleLoginSuccess(s) {
    setSession(s);
    setActiveTab(s.role === "teacher" ? "dashboard" : s.role === "student" ? "home" : "overview");
    setStage("app");
  }
  function logout() { setSession(null); setPendingRole(null); setStage("landing"); }

  if (!db) {
    return <div dir="rtl" className="font-body min-h-screen flex items-center justify-center" style={{ background: C.bg, color: C.inkSoft }}><style>{FONTS}</style>جارِ التحميل...</div>;
  }
  if (stage === "landing") return <LandingScreen onPickRole={handlePickRole} />;
  if (stage === "login") return <LoginScreen role={pendingRole} db={db} onBack={() => setStage("landing")} onSuccess={handleLoginSuccess} />;

  const tabs = session.role === "teacher" ? TEACHER_TABS : session.role === "student" ? STUDENT_TABS : PARENT_TABS;
  const roleLabel = session.role === "teacher" ? "المعلمة" : session.role === "student" ? "طالبة" : "ولي أمر";
  const roleAccent = session.role === "teacher" ? "indigo" : session.role === "student" ? "aqua" : "pink";

  return (
    <Shell role={session.role} studentId={session.studentId} db={db} persist={persist} tabs={tabs}
      onLogout={logout} activeTab={activeTab} setActiveTab={setActiveTab} roleAccent={roleAccent} roleLabel={roleLabel} />
  );
}